<template>
	<view class="register">
		<view class="p-name">
			用户注册
		</view>
		<u-form :model="form" ref="form" :rules="rules">
			<u-form-item label="用户名" prop="name" label-width="80" required>
				<u-input v-model="form.name" placeholder='请输入用户名' />
			</u-form-item>
			<u-form-item label="电 话" prop="phone" label-width="80" required>
				<u-input v-model="form.phone" placeholder='输入11位手机号码' />
			</u-form-item>
			<u-form-item label="验证码" prop="code" required label-width="80">
				<u-input placeholder="请输入4位验证码" v-model="form.code" type="text"></u-input>
				<u-button slot="right" type="success" @click="getCode">获取验证码</u-button>
			</u-form-item>
			<u-form-item label="密 码" label-width="80" required prop="password">
				<u-input v-model="form.password" type="password" placeholder='限4-20个字符' />
			</u-form-item>
			<u-form-item label="重复密码" label-width="80" required prop="repassword">
				<u-input v-model="form.repassword" type="password" placeholder='限4-20个字符' />
			</u-form-item>
			<view class="btns">
				<u-button type="primary" class="ubtn" @tap="submit">注册</u-button>
				<u-button class="ubtn" @tap="cancel">取消</u-button>
			</view>
		</u-form>
		<view class="serve-info">点击登录/注册前端论坛，即表示已阅读并同意</view>
		<view class="serve-text">
			<view @tap="gotoWeb('https://uniapp.dcloud.io/component/mp-weixin-plugin')">《隐私政策》</view>
			<view @tap="gotoWeb('https://developers.weixin.qq.com/miniprogram/dev/framework/')">《用户协议》</view>
			<view @tap="gotoUrl('/subpages/login/login')">《用户登录》</view>
		</view>

	</view>
</template>

<script>
	import {
		getRegisterCode,
		userRegister,
		findUser
	} from "@/common/api.js"
	export default {
		data() {
			return {
				// 用户信息输入框
				form: {
					name: '',
					phone: '',
					code: '',
					password: '',
					repassword: ''
				},
				// 用户输入规则校验
				rules: {
					// 密码验证
					name: [{
						validator: (rule, value, callback) => {
							// 名字长度为 2-10 位
							return (value.length >= 2 && value.length <= 10)
						},
						message: '必填  * 请输入 2-10 位用户名',
						trigger: ['change', 'blur'],
					}],
					// 手机验证码登陆、手机验证码注册 使用
					phone: [{
						validator: (rule, value, callback) => {
							// 自带判断 电话号码合法性方法
							return this.$u.test.mobile(value)
						},
						message: '必填 * 手机号码输入不正确',
						trigger: ['change', 'blur'],
					}],
					// 验证码验证
					code: [{
						validator: (rule, value, callback) => {
							// 名字长度为 2-10 位
							return value === '8888'
						},
						message: '必填 * 验证码长度为4位，并且固定值为 8888',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					// 密码验证
					password: [{
						validator: (rule, value, callback) => {
							// 名字长度为 4-20 位
							return (value.length >= 4 && value.length <= 20)
						},
						message: '必填  * 请输入 4-20 位密码',
						trigger: ['change', 'blur'],
					}],
					// 重复密码验证
					repassword: [{
						validator: (rule, value, callback) => {
							return this.form.password === value
						},
						message: '必填 * 两次密码输入不一致',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 取消表单输入
			cancel() {
				this.form = {
					name: '',
					phone: '',
					code: '',
					password: '',
					repassword: ''
				}
			},
			// 跳转到 H5 页面
			gotoWeb(url) {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + encodeURI(url)
				});
			},
			gotoUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取验证码
			async getCode() {
				let pcode = await getRegisterCode({
					phone: this.form.phone
				})
				uni.showModal({
					title: '验证码获取成功',
					content: '8888'
				})
			},

			// 提交表单验证
			submit() {
				this.$refs.form.validate().then(async valid => {
					let pres = await userRegister({
						// 必须，用户名
						name: this.form.name,
						// 必须，验证码发送模式。
						verifiable_type: 'sms',
						// 必须，用户收到的验证码。(教学阶段验证码统一使用 8888 )
						verifiable_code: "8888",
						// 如果 `verifiable_type` 为 `sms` 则必须, 手机号码。
						phone: this.form.phone,
						// 可选，密码，如果不输入密码，允许用户无密码注册。
						password: this.form.password
					})
					if (!!pres.token) {
						// 注册成功
						this.registerAfter(pres.token)
					} else {
						uni.showModal({
							title: '注册失败',
							content: "用户名和电话不可重复"
						})
					}
				});
			},
			// 注册、登陆成功后设置相关逻辑
			async registerAfter(token) {
				uni.switchTab({
					url:"/pages/me/me"
				})
				console.log("注册");
				this.show = false
				uni.setStorageSync('token', token)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.register {
		width: 650upx;
		padding: 40upx 40upx 0 60upx;
		text-align: center;

		.p-name {
			margin: 20upx 0upx 60upx;
			font-size: 36upx;
			font-weight: normal;
		}

		.serve-info {
			font-size: 22upx;
			margin-top: 60upx;
		}

		.serve-text {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 22upx;
			color: #6079b8;
			margin-top: 10upx;
		}
	}
</style>